<template>
  <div class="cart">
    <div class="list" v-for="(item,index) in cartList" :key="item.ID">
      <div class="title" @click="delNum(item.ID)">
        X 
      </div>
      <div class="content">
        <div class="che">
          <input type="checkbox" v-model="item.check" @change="count()">
        </div>
        <div class="img">
          <img :src="item.pro_img" alt="">
        </div>
        <div class="detail">
          <div class="d_tilte">
            {{ item.pro_title }}
          </div>
          <div class="sku">
            <span v-for="(items,index) in item.pro_sku" :key="index">
              {{ items.sku_color_title }}: {{ items.sku_color }}
            </span>
          </div>
          <div class="num">
            <button @click="editNum(0,item,index)">
              -
            </button>
              {{ item.pro_num }}
            <button @click="editNum(1,item,index)">
              +
            </button>
          </div>
          <div class="d_price">
            ￥{{ item.pro_price * item.pro_num }}
          </div>
        </div>
      </div>
      
    </div>

    <div>
      {{ counts }}
    </div>
    <div>
      全选: <input type="checkbox" v-model="allChe">
    </div>
  </div>
</template>

<script>
import {getCartList,delCartNum,editCartNum} from '@/api'
export default {
  methods: {
    getList(){
      getCartList().then(res => {
        this.cartList = res.data.result;
        this.cartList.forEach(item => {
          item.check = this.allChe;
          item.pro_sku = JSON.parse(item.pro_sku.replace("'","").replace("'",""));
          
        })
        this.count();
      })
    },
    delNum(id){
      delCartNum({
        address_id: id
      }).then(res => {
        if(res.data.code == 1){
          this.$Message.success('删除成功');
          this.getList();
        }else{
          this.$Message.error(res.data.msg);
        }
      })
    },
    editNum(type,item,index){
      let items = JSON.parse(JSON.stringify(item))
      let number = 0;
      if(type == 1){
        number = ++items.pro_num 
      }else{
        number = --items.pro_num 
      }
      if(number < 1){
        console.log(number);
        return
      }
      this.cartList[index].pro_num = number;
      editCartNum({
        address_id:items.ID,
        number
      })
    },
    count(){
      let a_che = 0;
      this.counts = 0;
      this.cartList.forEach(item => {
        if(item.check == true){
          a_che ++;
          this.counts += item.pro_price * item.pro_num
        }
      })

      if(a_che == 0){
        this.allChe = false;
      }
      if(a_che == this.cartList.length){
        this.allChe = true;
      }
    }
  },
  created(){
    this.getList()
  },
  watch:{
    allChe(nval){
      this.cartList.forEach(item => {
        item.check = nval;
      })
      this.count();
    }
  },
  data(){
    return {
      cartList: [],
      allChe: true,
      counts: 0,
      types: 0
    }
  }
}
</script>

<style lang="scss" scoped>
  .cart{
    min-height: 100vh;
    background-color: #eee;
    padding-top: 15px;
    .list{
      width: 92%;
      box-sizing: border-box;
      padding: 10px;
      background-color: #fff;
      border-radius: 11px;
      margin-bottom: 15px;
      margin-left: 4%;
      .title{
        text-align: right;
      }
      .content{
        display: flex;
        .img{
          width: 25%;
          img{
            width: 90%;
          }
        }
        button{
          width: 20px;
        }
      }
    }
  }
</style>